<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<style type="text/css">
		.add_enable {
			display: inline-block;
			width: 1.25rem;
			height: 1.25rem;
			background-color: #90EE90;
			text-align: center;
			line-height: 1.25rem;
			color: #550000;
			cursor: pointer;
		}

		.add_disable {
			display: inline-block;
			width: 1.25rem;
			height: 1.25rem;
			background-color: #dadada;
			text-align: center;
			line-height: 1.25rem;
			color: #c6ccff;
			cursor: pointer;
		}

		.del_enable {
			display: inline-block;
			width: 1.25rem;
			height: 1.25rem;
			background-color: #90EE90;
			text-align: center;
			line-height: 1.25rem;
			color: #550000;
			cursor: pointer;
		}

		.del_disable {
			display: inline-block;
			width: 1.25rem;
			height: 1.25rem;
			background-color: #dadada;
			text-align: center;
			line-height: 1.25rem;
			color: #c6ccff;
			cursor: pointer;
		}

		.num {
			border-style: none;
			border-bottom: #000000;
		}
	</style>
	<body>
		<div id="container">
			商品: 手机<br>
			<div>
				价格:
				<span v-bind:class="[num==0 ? 'del_disable':'del_enable']" @click="jian($event)">-</span>
				<span class="num"
					style="color: #C71585;width: 50px; border-style: none; border-bottom: #000000;">{{num}}</span>
				<span class="add_enable" @click="num++">+</span>
			</div>
		</div>
		<script type="text/javascript">
			var app = new Vue({
				el: "#container",
				data: {
					num: 1
				},
				methods: {
					jian: function(MouseEvent) {
						console.log(MouseEvent);
						if (this.num > 0) {
							this.num--
						}

					}
				}
			})
		</script>
	</body>
</html>
